<template>
  <div class="echart">
    <div ref="echartRef" :style="{ width:width, height:height }"></div>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, ref,withDefaults ,defineProps, watchEffect} from "vue";
import {EChartsOption} from "echarts"
import useEchart from '../hooks/useEcharts'
//   props:{
//     width:{
//         type:String,
//         default:'350px'
//     },
//     height:{
//         type:String,
//         default:'400px'
//     },
//     option:{
//         type:Object,
       
//     }
//   },

    const props = withDefaults(
        defineProps<{
            width?:string
            height?:string
            options:EChartsOption
        }>(),{
            width:'300px',
            height:'400px'
        }
    )
 
    const echartRef = ref<HTMLElement>();
    onMounted(() => {
        const { setOption} = useEchart(echartRef.value!)
        watchEffect(()=>{
          setOption(props.options)
        })
    //   const echartInstance = echarts.init(echartRef.value!);
    //   echartInstance.setOption(props.option)
    });
  
</script>

<style>
</style>